<template>
  <header v-if="route.meta.showTitle" class="page-header">
    <label class="back" @click="router.back()">
      <van-icon name="arrow-left" />
    </label>
    <span class="title">{{ route.meta.title }}</span>
  </header>
</template>

<script setup>
import { useRoute } from 'vue-router'

const router = useRoute();
const route = useRoute();
</script>

<style lang="less" scoped>
.page-header {
  height: 4.9rem;
  width: 100vw;
  box-shadow: 0 0 1rem var(--van-gray-3);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .back {
    width: 4rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title {
    flex: 1;
    font-weight: 500;
  }
}
</style> 